<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue实践--任务列表</title>
    <link rel="stylesheet" href="css/tdlist.css">
    <script src="js/vue.js"></script>
</head>

<body>
    <div class="page-top">
        <div class="page-content">
            <h2>任务计划列表</h2>
        </div>
    </div>
    <div class="main">
        <h3 class="big-title">添加任务：</h3>
        <!--需求2:添加任务-->
        <input placeholder="例如：吃饭睡觉打豆豆；    提示：+回车即可添加任务" class="task-input" type="text" @keyup.enter="addTodo" v-model="todo" />
        <!--需求3:显示隐藏任务提示-->
        <!--需求7:统计未完成任务数量-->
        <!--需求9:根据hash值,筛选任务状态对应的数据列表-->
        <!--需求10:当hash值改变时,选中的任务状态样式也要变 -->
        <ul class="task-count" v-show="tdlist.length">
            <li>
                <!--{{
                    tdlist.filter(function(item){
                        return !item.isChecked
                    }).length
                }}-->
                {{ noTdlistLen }} 个任务未完成
            </li>
            <li class="action">
                <a href="#all" :class="{active: visibility === 'all'}">所有任务</a>
                <a href="#unfinish" :class="{active: visibility === 'unfinish'}">未完成的任务</a>
                <a href="#finish" :class="{active: visibility === 'finish'}">完成的任务</a>
            </li>
        </ul>
        <h3 class="big-title">任务列表：</h3>
        <div class="tasks">
            <span class="no-task-tip" v-show="!tdlist.length">还没有添加任何任务</span>
            <ul class="todo-list">
                <!--
                    <li class="todo completed">
                        <div class="view">
                            <input class="toggle" type="checkbox" />
                            <label>吃饭睡觉打豆豆</label>
                            <button class="destroy"></button>
                        </div>
                        <input class="edit" type="text" />
                    </li>
                -->
                <!--需求4:任务选中效果-->
                <li class="todo" v-for="item in hashListFilter" v-bind:class="{completed:item.isChecked,editing:item === etodo}">
                    <div class="view">
                        <input class="toggle" type="checkbox" v-model="item.isChecked" />
                        <!--需求6:①.编辑任务~双击编辑任务-->
                        <label @dblclick="editTodo(item)">{{ item.title }}</label>
                        <!--需求5:删除任务-->
                        <button class="destroy" @click="delTodo(item)"></button>
                    </div>
                    <!--需求6:②.编辑任务-自动获取焦点-->
                    <!--需求6:③.编辑任务-编辑完成-->
                    <!--需求6:④.编辑任务-取消编辑-->
                    <input class="edit" type="text" v-model="item.title" v-focus="etodo===item" @keyup.enter="editTodoSuccess" @blur="editTodoSuccess" @keyup.esc="editTodoCancel(item)" />
                </li>
            </ul>
        </div>
    </div>
    <script src="js/tdlist.js"></script>
</body>

</html>